<template>
  <div class="screen-block">
    <Title>地区销量趋势</Title>
    <div ref="chartRef" style="width: 100%; height: 90%"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, shallowRef } from 'vue';
import type { ECharts, EChartsCoreOption } from 'echarts'
import * as echarts from 'echarts'
import Title from '../Title.vue'

//  1.根据DOM初始化Echarts实例
const chartRef = shallowRef<HTMLElement | null>(null)
const chart = shallowRef<ECharts | null>(null)

onMounted(() => {
  chart.value = echarts.init(chartRef.value)
  renderChart()
})

const data = [
  {
    name: "上海",
    data: [
      "155.13",
      "134.54",
      "124.54",
      "122.16",
      "129.56",
      "155.13",
      "127.12",
      "124.54",
      "122.16",
      "129.56",
      "129.56",
      "129.56",
    ]
  },
  {
    name: "北京",
    data: [
      "155.13",
      "127.12",
      "124.54",
      "122.16",
      "129.56",
      "155.13",
      "127.12",
      "124.54",
      "122.16",
      "129.56",
      "129.56",
      "129.56",
    ]
  },
  {
    name: "杭州",
    data: [
      "155.13",
      "127.12",
      "124.54",
      "122.16",
      "129.56",
      "155.13",
      "127.12",
      "124.54",
      "122.16",
      "129.56",
      "129.56",
      "129.56",
    ]
  },
  {
    name: "深圳",
    data: [
      "155.13",
      "127.12",
      "124.54",
      "122.16",
      "129.56",
      "155.13",
      "127.12",
      "124.54",
      "122.16",
      "129.56",
      "129.56",
      "129.56",
    ]
  }
]

// 2.构建options配置对象
const renderChart = () => {
  const option: EChartsCoreOption = {
    grid: {
      top: "25%",
      right: "4%",
      bottom: "1%",
      left: "3%",
      containLabel: true
    },
    tooltip: {
      trigger: "axiss"
    },
    legend: {
      left: 20,
      top: "8%",
      icon: "circle",
      data: data.map((item) => item.name),
      textStyle: {
        color: "#aaa"
      }
    },
    xAxis: {
      type: "category",
      data: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
      boundaryGap: false
    },
    yAxis: {
      type: "value"
    },
    series: getSerice()
  }

  // 3.echarts实例调用setOption方法，传入option对象
  chart.value!.setOption(option);

  function getSerice() {
    // 半透明的颜色值
    const colorArr1 = [
      "rgba(11, 168, 44, 0.5)",
      "rgba(44, 110, 255, 0.5)",
      "rgba(22, 242, 217, 0.5)",
      "rgba(254, 33, 30, 0.5)",
      "rgba(250, 105, 0, 0.5)",
    ];
    // 全透明的颜色值
    const colorArr2 = [
      "rgba(11, 168, 44, 0)",
      "rgba(44, 110, 255, 0)",
      "rgba(22, 242, 217, 0)",
      "rgba(254, 33, 30, 0)",
      "rgba(250, 105, 0, 0)",
    ];

    const seriesArr = data.map((item, index) => {
      return {
        name: item.name,
        type: "line",
        data: item.data,
        lineStyle: {
          width: 3
        },
        itemStyle: {
          borderWidth: 4,
        },
        symbol: "circle",
        smooth: true,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: colorArr1[index]
            },
            {
              offset: 1,
              color: colorArr2[index]
            }
          ])
        }
      }
    })
    return seriesArr
  }

}
</script>

<style scoped lang="scss">
.screen-block {
  width: 100%;
  height: 550px;
  background-color: var(--ds-block-bg);
  padding: 16px;
  margin-top: 20px;
}
</style>